<template>
  <div v-loading="boxLoading" class="dialog-box" element-loading-background="rgba(0, 0, 0, 0.8)"
       element-loading-spinner="el-icon-loading" element-loading-text="正在加载...">
    <div class="box-content" style="width: 306px">
      <div class="content-header">
        <span>转换参数-高级选项</span>
        <i class="el-icon-close" @click="$parent.advancedShow = false"></i>
      </div>
      <div class="content-body">
        <el-form label-position="left" label-width="100px">
          <div class="form-item-box">
            <el-form-item label="以节点切分">
              <el-select v-model="convertParameters.options.splitByNode" style="width:185px">
                <el-option :value="true" label="是"></el-option>
                <el-option :value="false" label="否"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="更改坐标系">
              <el-select v-model="convertParameters.options.coordinateModify" style="width:185px">
                <el-option :value="true" label="是"></el-option>
                <el-option :value="false" label="否"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="修改纹理">
              <el-select v-model="convertParameters.options.changeTexture" style="width:185px">
                <el-option :value="true" label="是"></el-option>
                <el-option :value="false" label="否"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="切割几何">
              <el-select v-model="convertParameters.options.cutMesh" style="width:185px">
                <el-option :value="true" label="是"></el-option>
                <el-option :value="false" label="否"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="form-item-box">
            <div class="checkbox-span">
              <el-checkbox v-model="reserveNodes" label="保留单个节点"></el-checkbox>
            </div>
            <el-form-item label="选择保留层级">
              <el-select v-model="keepLevel" :disabled="!reserveNodes" @change="setKeepLevel">
                <el-option v-for="item in transformLevels" :key="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="form-item-box">
            <div class="checkbox-span">
              <el-checkbox v-model="adjustParameters" label="单独调整每一层级参数"></el-checkbox>
            </div>
            <el-form-item label="选择层级">
              <el-select v-model="selectLevel" :disabled="!adjustParameters" style="width:171px">
                <el-option v-for="item in transformLevels" :key="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <template v-if="selectParameter">
              <el-form-item label="最大渲染调用">
                <el-input
                    v-model.number="selectParameter.maxDrawCall"
                    style="width:171px"></el-input>
              </el-form-item>
              <el-form-item label="合并纹理">
                <el-select v-model="selectParameter.mergeTexture"
                           style="width: 100%">
                  <el-option :value="true" label="是"></el-option>
                  <el-option :value="false" label="否"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="切割几何">
                <el-select v-model="selectParameter.separateResources"
                           style="width: 100%">
                  <el-option :value="true" label="是"></el-option>
                  <el-option :value="false" label="否"></el-option>
                </el-select>
              </el-form-item>
            </template>
          </div>
          <div class="form-item-box" style="border:none">
            <el-form-item class="submit-btn">
              <el-button type="primary" @click="$parent.advancedShow = false">确定</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "advancedSet",
  props: {
    convertParameters: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      selectLevel: '',
      adjustParameters: false,
      keepLevel: '',
      reserveNodes: false,
      boxLoading: false,
      transformLevels: [],
      selectParameter: null
    }
  },
  watch: {
    selectLevel(val) {
      this.selectParameter = this.convertParameters.options.buildGridTileConfig[val]
    }
  },
  methods: {
    setKeepLevel() {
      this.transformLevels.forEach(item => {
        if (item === this.keepLevel) {
          this.convertParameters.options.buildGridTileConfig[item].keep = 'node'
        } else {
          if (this.convertParameters.options.buildGridTileConfig[item].keep) {
            delete this.convertParameters.options.buildGridTileConfig[item].keep
          }
        }
      })
    }
  },
  created() {
    this.transformLevels = Object.keys(this.convertParameters.options.buildGridTileConfig)
  }
}
</script>

<style lang="less" scoped>

</style>